﻿<script src="https://maps-api-ssl.google.com/maps/api/js?v=3&sensor=false" type="text/javascript"></script>
<script type='text/javascript'>
function initializeMap() {
	var centreLatitude = %centreLatitude%;
	var centreLongitude = %centreLongitude%;
	var markerLatitude = %latitude%;
	var markerLongitude = %longitude%;
	var title = '%title%';
	var label = '%label%';
	var zoom = %zoom%;
	var displayIcon = %displayIcon%;
	var displayZoom = %displayZoom%;
	var disableDragging = %disableDragging%;
	var mapTypeId = google.maps.MapTypeId.%mapTypeId%;
	var map_canvas = '%mapCanvasID%';

	// wire up editor part events
	var markerLatitudeEl = document.getElementById('%latitudeClientID%');
	var markerLongitudeEl = document.getElementById('%longitudeClientID%');

	var centreLatitudeEl = document.getElementById('%centreLatitudeClientID%');
	var centreLongitudeEl = document.getElementById('%centreLongitudeClientID%');
	var zoomControlEl = document.getElementById('%zoomControlClientID%');

	var addressEl = document.getElementById('%addressClientID%');
	var mapTypeEl = document.getElementById('%mapTypeClientID%');

	var labelEl = document.getElementById('%labelClientID%');
	if(labelEl) labelEl.onchange = function () {
		label = labelEl.value;
	}

	var titleEl = document.getElementById('%titleClientID%');
	if(titleEl) titleEl.onchange = function () {
		title = titleEl.value;
	}

	var disableDragEl = document.getElementById('%disableDragClientID%');
	if(disableDragEl) disableDragEl.onclick = function () {
		disableDragging = disableDragEl.checked;
		map.setOptions({draggable: !disableDragging });
		marker.setOptions({draggable: !disableDragging });
	}

	var displayZoomEl = document.getElementById('%displayZoomClientID%');
	if(displayZoomEl) displayZoomEl.onclick = function () {
		displayZoom = displayZoomEl.checked;
		map.setOptions({zoomControl: displayZoom });
	}

	var displayIconEl = document.getElementById('%displayIconClientID%');
	if(displayIconEl) displayIconEl.onclick = function () {
		displayIcon = displayIconEl.checked;
		marker.setVisible(displayIcon);
		if(displayIcon && (title != '' || label != ''))
	infowindow.open(map, marker);
	else
	infowindow.close();
	}

	var updateButton = document.getElementById('%findClientID%');
	if(updateButton)
	updateButton.onclick = function() {
	//if(addressEl.value != "")
	geocode(addressEl.value);
	//addressEl.value = "";
	return false;
	}

    var infowindow;
	var mapDiv = document.getElementById(map_canvas);
	var geocoder = new google.maps.Geocoder();
	var map = new google.maps.Map(mapDiv, {
	center: new google.maps.LatLng(centreLatitude, centreLongitude),
	zoom: zoom,
	zoomControl: displayZoom,
	navigationControl: displayZoom,
	draggable: !disableDragging,
	mapTypeId: mapTypeId
	});

	var marker = new google.maps.Marker({
	map: map,
	position: map.getCenter(),
	draggable: !disableDragging
	});;

	update(centreLatitude, centreLongitude, markerLatitude, markerLongitude, title, label);

	// wire up events
	google.maps.event.addListener(map, 'dragend', function() {
	centreLatitude = map.getCenter().lat();
	centreLongitude = map.getCenter().lng();
	if(centreLatitudeEl) centreLatitudeEl.value = centreLatitude;
	if(centreLongitudeEl) centreLongitudeEl.value = centreLongitude;
	});

	// wire up events
	google.maps.event.addListener(map, 'zoom_changed', function() {
	zoom = map.getZoom();
	if(zoomControlEl) zoomControlEl.value = zoom;
	});

	// wire up events
	google.maps.event.addListener(map, 'maptypeid_changed', function() {
	mapTypeId = map.getMapTypeId();
	if(mapTypeEl) mapTypeEl.value = mapTypeId;
	});


	function geocode(address) {
	geocoder.geocode({
	'address': address,
	'partialmatch': true}, geocodeResult);
	}

	function update(latitude, longitude, newMarkerLatitude, newMarkerLongitude, title, label) {
	var centrePoint = new google.maps.LatLng(latitude, longitude);
	var markerPoint = new google.maps.LatLng(newMarkerLatitude, newMarkerLongitude);

	map.setCenter(centrePoint);

	if(displayIcon) {
	    if(marker)
	        marker.setPosition(markerPoint);
        if(infowindow)
            infowindow.close();
	    infowindow = new google.maps.InfoWindow({
	    content: '<strong>' + title + '</strong><br/>' + label.replace(/\,/g,',<br />')
			    });

		// wire up events  
		google.maps.event.addListener(marker, 'dragend', function() {
			markerLatitude = marker.getPosition().lat();
			markerLongitude = marker.getPosition().lng();
			if(markerLatitudeEl) markerLatitudeEl.value = markerLatitude;
			if(markerLongitudeEl) markerLongitudeEl.value = markerLongitude;
		});	  

		if(title != '' || label != '')
			infowindow.open(map, marker);
	}

		if(markerLatitudeEl) markerLatitudeEl.value = newMarkerLatitude;
		if(markerLongitudeEl) markerLongitudeEl.value = newMarkerLongitude;
		if(centreLatitudeEl) centreLatitudeEl.value = latitude;
		if(centreLongitudeEl) centreLongitudeEl.value = longitude;
	}

	function geocodeResult(results, status) {
		var oldCentreLatitude = centreLatitudeEl.value;
		var oldCentreLongitude = centreLongitudeEl.value;
		if (status == 'OK' && results.length > 0) {
			var newLatitude = results[0].geometry.location.lat();
			var newLongitude = results[0].geometry.location.lng();

			if(newLatitude == markerLatitude && newLongitude == markerLongitude)
				update(oldCentreLatitude, oldCentreLongitude, newLatitude, newLongitude, title, label);
			// marker not moved: update label but do not recentre map
			else
				update(newLatitude, newLongitude, newLatitude, newLongitude, title, label);
			// marker moved: update label and recentre map            
		} else if(status == 'ZERO_RESULTS') {
				update(oldCentreLatitude, oldCentreLongitude, markerLatitude, markerLongitude, title, label);
		} else {
			alert("Geocode was not successful for the following reason: " + status);
		}
	}
}
		

google.maps.event.addDomListener(window, 'load', initializeMap);


</script>
<div id='%mapCanvasID%' style='min-width:200px;width:100%;min-height:200px;height:100%;'></div>